<template>
  <div>
    <moon-switch :value="bool1" @clickEvent="bool1=!bool1" size="big"></moon-switch>
    <moon-switch :value="bool2" @clickEvent="bool2=!bool2" size="normal"></moon-switch>
    <moon-switch :value="bool3" @clickEvent="bool3=!bool3" size="small"></moon-switch>
  </div>
</template>

<script>
import MoonSwitch from '../lib/MoonSwitch.vue'
export default {
  components: { MoonSwitch },
  data() {
    return {
      bool1: true,
      bool2: false,
      bool3: true,
      sourceCodeTitle: '尺寸类型',
      sourceCode:
        `<template>
  <div>
    <moon-switch :value="bool1" @clickEvent="bool1=!bool1" size="big"></moon-switch>
    <moon-switch :value="bool2" @clickEvent="bool2=!bool2" size="normal"></moon-switch>
    <moon-switch :value="bool3" @clickEvent="bool3=!bool3" size="small"></moon-switch>
  </div>
</template>

<script>
import MoonSwitch from '../lib/MoonSwitch.vue'
export default {
  components: { MoonSwitch },
  data() {
    return {
      bool1: true,
      bool2: false,
      bool3: true
    }
  }
}
</` + 'script>'
    }
  }
}
</script>
